<template>
  <el-dialog v-model="dialogRoad" title="路况信息" width="80%">
    <div class="search">
      <el-input
        v-model="inputSearch"
        placeholder="请输入事件类型进行搜索"
        :prefix-icon="Search"
        @change="handleSearch"
      ></el-input>
    </div>
    <!-- 表单数据 -->
    <el-table :data="event" stripe border>
      <el-table-column label="用户id" prop="user_id"></el-table-column>
      <el-table-column label="事件类型" prop="event_type"></el-table-column>
      <el-table-column label="事件地址" prop="event_address"></el-table-column>
      <el-table-column label="发生时间" prop="event_time"></el-table-column>
      <el-table-column label="事件描述" prop="event_describe"> </el-table-column>

      <el-table-column label="操作" property="event_id">
        <template #default="scope">
          <div v-if="isShow(scope.$index, scope.row)">
            <el-button
              size="small"
              type="success"
              :icon="Filter"
              @click="handleEdit(scope.row.event_id)"
              >通过</el-button
            >
            <el-button
              size="small"
              type="warning"
              :icon="Delete"
              @click="handleDelete(scope.row.event_id)"
              >忽略</el-button
            >
          </div>
          <span v-else>已审核</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      :current-page="page"
      :page-size="size"
      :page-sizes="[1, 2, 5, 10]"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </el-dialog>
</template>

<script setup>
import { ref, toRefs, getCurrentInstance, onMounted } from 'vue'
import { useRoadDialog } from '@/stores/dialogRoad.js'
import { Search, Delete, Filter } from '@element-plus/icons-vue'

const { dialogRoad } = toRefs(useRoadDialog())
const { proxy } = getCurrentInstance()
const inputSearch = ref('')
const show = ref(true)
const event = ref([])
let total = ref(0)
const page = ref(1)
const size = ref(5)
const getAllEvent = () => {
  proxy.$http.get('/event', { params: { page: page.value, size: size.value } }).then((res) => {
    event.value = res.result.data
    total.value = res.result.total
  })
}

onMounted(() => {
  getAllEvent()
})
// 分页
const handleCurrentChange = (p) => {
  page.value = p
  getAllEvent()
}
const handleSizeChange = (s) => {
  size.value = s
  getAllEvent()
}
// 删除
const handleDelete = (id) => {
  proxy.$http.delete(`/event/${id}`).then((res) => {
    const { code, message } = res
    if (code == 0) {
      proxy.$http.get('/event', { params: { page: page.value, size: size.value } }).then((res) => {
        event.value = res.result.data
        total.value = res.result.total
      })
    }
  })
}
// 搜索
const handleSearch = () => {
  proxy.$http
    .get('/event', {
      params: {
        page: page.value,
        size: size.value,
        keyword: inputSearch.value
      }
    })
    .then((res) => {
      event.value = res.result.data
      total.value = res.result.total
    })
}
// 通过
const handleEdit = (id) => {
  proxy.$http.put(`/event/${id}`, { event_check: '已审核' }).then((res) => {
    const { code, message } = res
    if (code == 0) {
      proxy.$http.get('/event', { params: { page: page.value, size: size.value } }).then((res) => {
        event.value = res.result.data
        total.value = res.result.total
      })
    }
  })
}
// 切换
const isShow = (index, row) => {
  if (row.event_check === '已审核') {
    show.value = false
    return show.value
  } else {
    show.value = true
    return show.value
  }
}
</script>

<style scoped>
.search {
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-input {
  width: 420px;
  padding-bottom: 20px;
}
.el-pagination {
  margin-top: 20px;
}
</style>
